GitHub Pages
使用方式
1. 將想host的Repository name命名為[github 帳號].github.io
→Create Repositorty
可從https://[你的帳號].github.io/存取
Host子專案
1. 子資料夾方式
直接在[你的帳號].github.io repo裡新增子專案目錄
可從https://[你的帳號].github.io/[子專案]存取
會造成主專案目錄過度龐大且混亂
2. 獨立專案方式
$ git checkout -b gh-pages
可從https://[你的帳號].github.io/[子專案]存取
同時存在子資料夾與獨立專案的同名專案時，會以獨立專案的分支內容為主
Host非原生網頁
1. npm i gh-pages --save-dev
2. 於package.json新增：
code:package.json
{
// ...
"scripts": {
"deploy": "gh-pages -d dist"
...
}
...
}
專案資料夾根目錄新增.github資料夾
新增workflows資料夾
新增deploy-to-github-pages.yaml檔案
code:deploy-to-github-pages.yaml
name: Build and Deploy
permissions:
contents: write
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️
uses: actions/checkout@v3
- name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
run: |
npm install
npm run build
- name: Deploy 🚀
uses: JamesIves/github-pages-deploy-action@v4
with:
BRANCH: gh-pages # The branch the action should deploy to.
FOLDER: public # The folder the action should deploy.
CLEAN: true # Automatically remove deleted files from the deploy branch